<%--
  Created by IntelliJ IDEA.
  User: 0927
  Date: 2020/10/5
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我要卖车</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/sellCar.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">

    <style>
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            /*color: #fff;*/
            /*background: #0088cc;*/
            /*border: 1px solid #0088cc;*/
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 30px; /* Set the top position of pinned element */
        }

        .img-p{
            width: 60px;
            height: 60px;
            margin: 30px auto 10px;
            background: url("${pageContext.request.contextPath}/images/xrb.png") no-repeat;
        }
        .user-info{
            margin-bottom: 24px;
            font-size: 16px;
            color: #495056;
            text-align: center;
        }
        .user-info span{
            display: block;
            font-size: 12px;
            color: #a5abb2;
            text-align: center;
        }
    </style>
</head>
<body>
<!--nav开始-->
<div id="nav_my">

</div>
<!--nav结束-->
<!--nav beigin-->
<%--<div class="container-fluid">--%>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap Affix</h1>
        </div>
        <div class="row">
            <div class="col-md-3" id="myScrollspy">
                <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                    <li id="i1"><a href="javascript:void(0);" onclick="xu_method1()">
                        <p class="img-p"></p>
                        <p class="user-info">个人中心
                            <span>手机号：16530801182</span>
                        </p></a>
                    </li>
                    <li id="i2"><a href="javascript:void(0);" onclick="xu_method2()">收藏车辆</a></li>
                    <li id="i3"><a href="javascript:void(0);" onclick="xu_method3()">浏览记录</a></li>
                    <li id="i4"><a href="javascript:void(0);" onclick="xu_method4()">降价提醒</a></li>
                </ul>
            </div>
            <div class="col-md-9">
                <div id="d1" style="display: none">
                    <c:forEach var="x" items="${newRecentList}" begin="0" end="9">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="${pageContext.request.contextPath}/images/car1.png"
                                     alt="" style="width: 80%;">
                                <div class="caption car_info ">
                                    <p>${x.brName}${x.stName} 2015款 ${x.cPaifang}L ${x.cDrive}
                                    </p>
                                    <span>${x.cRegistration}年 | ${x.cMileage}万公里 | 到店服务</span>
                                    <p style="margin-top: 5px">成交价 <span>${x.rePrice}万</span>&nbsp;&nbsp;<strong>2天卖出</strong></p>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
                <div id="d2" style="display: none">
                    <c:forEach var="x" items="${newRecentList}" begin="0" end="9">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="${pageContext.request.contextPath}/images/car1.png"
                                     alt="" style="width: 80%;">
                                <div class="caption car_info ">
                                    <p>${x.brName}${x.stName} 2015款 ${x.cPaifang}L ${x.cDrive}
                                    </p>
                                    <span>${x.cRegistration}年 | ${x.cMileage}万公里 | 到店服务</span>
                                    <p style="margin-top: 5px">成交价 <span>${x.rePrice}万</span>&nbsp;&nbsp;<strong>2天卖出</strong></p>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
                <div id="d3" style="display: none">
                    <c:forEach var="x" items="${newRecentList}" begin="0" end="9">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="${pageContext.request.contextPath}/images/car1.png"
                                     alt="" style="width: 80%;">
                                <div class="caption car_info ">
                                    <p>${x.brName}${x.stName} 2015款 ${x.cPaifang}L ${x.cDrive}
                                    </p>
                                    <span>${x.cRegistration}年 | ${x.cMileage}万公里 | 到店服务</span>
                                    <p style="margin-top: 5px">成交价 <span>${x.rePrice}万</span>&nbsp;&nbsp;<strong>2天卖出</strong></p>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
                <div id="d4" style="display: none">
                    <c:forEach var="x" items="${newRecentList}" begin="0" end="9">
                        <div class="col-md-3">
                            <div class="thumbnail">
                                <img src="${pageContext.request.contextPath}/images/car1.png"
                                     alt="" style="width: 80%;">
                                <div class="caption car_info ">
                                    <p>${x.brName}${x.stName} 2015款 ${x.cPaifang}L ${x.cDrive}
                                    </p>
                                    <span>${x.cRegistration}年 | ${x.cMileage}万公里 | 到店服务</span>
                                    <p style="margin-top: 5px">成交价 <span>${x.rePrice}万</span>&nbsp;&nbsp;<strong>2天卖出</strong></p>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    <br>
    </div>

<%--</div>--%>
<!--footer-->
<div id="footer">

</div>
<!--footer-->
<!--question end-->
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript"></script>
<script>
    $(function(){
        $("#nav_my").load("${pageContext.request.contextPath}/jsp/common/nav.jsp");
    })

    $(function(){
        $("#footer").load("${pageContext.request.contextPath}/jsp/common/footer.jsp");
    })

    // $(function () {
    //     $("#first").click()
    // })
    // $(xu_method(){
    //
    // })
    function xu_method1() {
        $("#d1").css("display","block");
        $("#d2").css("display","none");
        $("#d3").css("display","none");
        $("#d4").css("display","none");
        $("#i1").attr("class","active");
        $("#i2").attr("class","");
        $("#i3").attr("class","");
        $("#i4").attr("class","");
    }
    function xu_method2() {
        $("#d1").css("display","none");
        $("#d2").css("display","block");
        $("#d3").css("display","none");
        $("#d4").css("display","none");
        $("#i2").attr("class","active");
        $("#i1").attr("class","");
        $("#i3").attr("class","");
        $("#i4").attr("class","");
    }
    function xu_method3() {
        $("#d1").css("display","none");
        $("#d2").css("display","none");
        $("#d3").css("display","block");
        $("#d4").css("display","none");
        $("#i3").attr("class","active");
        $("#i2").attr("class","");
        $("#i1").attr("class","");
        $("#i4").attr("class","");
    }
    function xu_method4() {
        $("#d1").css("display","none");
        $("#d2").css("display","none");
        $("#d3").css("display","none");
        $("#d4").css("display","block");
        $("#i4").attr("class","active");
        $("#i1").attr("class","");
        $("#i3").attr("class","");
        $("#i2").attr("class","");
    }
</script>
</body>
</html>
